<template>
  <div class="structure">
    <el-tree icon-class="a" :data="list" >
      <div class="row" slot-scope="{ node, data }">
        <div class="left">
          <i v-if="!node.childNodes.length" class="el-icon-user" />
          <i v-else-if="node.expanded" class="el-icon-minus" />
          <i v-else class="el-icon-plus" />
          {{ node.label }}
        </div>
        <div class="right">
          {{ data.manager }}
          <custom-dropdown title="操作" :options="options" @command="(cmd) => onDropdownItemClick(cmd, data)" />
        </div>
      </div>
    </el-tree>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import CustomDropdown from '../../components/custom-dropdown';

export default {
  components: {
    CustomDropdown,
  },
  data () {
    return {
      options: [
        { label: '添加子部门', command: 'add' },
        { label: '查看部门', command: 'detail' },
        { label: '删除部门', command: 'delete' },
      ],
    };
  },
  computed: {
    ...mapState('structure', ['list']),
  },
  methods: {
    ...mapActions('structure', ['updateStructure']),
    onDropdownItemClick (cmd, row) {
      switch (cmd) {
        case 'add':
          this.onAdd(row);
          break;
        case 'detail':
          this.onDetail(row);
          break;
        case 'delete':
          this.onDelete(row);
          break;

        default:
          break;
      }
    },
    onAdd (row) {
      console.log('add', row);
    },
    onDetail (row) {
      console.log('detail');
    },
    onDelete (row) {
      console.log('delete', row.id);
    },
  },
  mounted () {
    this.updateStructure();
  },
};
</script>

<style scoped>
.structure .row {
  overflow: hidden;
  width: 100%;
}
.structure .row .left {
  float: left;
}
.structure .row .right {
  float: right;
}
</style>
